<script setup>
import { ref, onMounted } from 'vue';
import {
  ArrowLeftBold,
  ArrowRight,
  ArrowRightBold,
  Check,
  EditPen,
  Medal,
  Paperclip,
  Plus
} from "@element-plus/icons-vue";
import router from "@/router";
import html2canvas from 'html2canvas';
import axios from "axios";

// 创建响应式变量
const name = ref('');
const age = ref('');
const contactNumber = ref('');
const gender = ref('');
const ethnicity = ref('汉族');
const email = ref('');
const politicalStatus = ref('');
const jobSeeking = ref('');
const educationStartDate = ref('');
const educationEndDate = ref('');
const major = ref('');
const degree = ref('');
const mainCourses = ref('');
// 荣誉奖项数组
const honors = ref("");
// 技能特长数组
const skills = ref("");
// 项目经验数组
const programs = ref("");
const self = ref('')

// 存储截图的变量
const screenshot = ref(null);
onMounted(() => {
  const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
  console.log(dataFromPreviousPage.context.seekername);
  if (dataFromPreviousPage.context.seekername) {
    name.value = dataFromPreviousPage.context.seekername;
  }
  if (dataFromPreviousPage.context.age) {
    age.value = dataFromPreviousPage.context.age;
  }
  if (dataFromPreviousPage.context.phone) {
    contactNumber.value = dataFromPreviousPage.context.phone;
  }
  if (dataFromPreviousPage.context.gender) {
    gender.value = dataFromPreviousPage.context.gender;
  }
  if (dataFromPreviousPage.context.email) {
    email.value = dataFromPreviousPage.context.email;
  }
  if (dataFromPreviousPage.context.identity) {
    politicalStatus.value = dataFromPreviousPage.context.identity;
  }
  if(dataFromPreviousPage.context.expectjob){
    jobSeeking.value = dataFromPreviousPage.context.expectjob;
  }
  if (dataFromPreviousPage.context.startYear) {
    educationStartDate.value = dataFromPreviousPage.context.startYear;
  }
  if (dataFromPreviousPage.context.endYear) {
    educationEndDate.value = dataFromPreviousPage.context.endYear;
  }
  if (dataFromPreviousPage.context.degree) {
    degree.value = dataFromPreviousPage.context.degree;
  }
  if (dataFromPreviousPage.context.major) {
    major.value = dataFromPreviousPage.context.major;
  }
  if (dataFromPreviousPage.resume.part1) {
    mainCourses.value = dataFromPreviousPage.resume.part1;
  }
  if (dataFromPreviousPage.resume.part2) {
    skills.value = dataFromPreviousPage.resume.part2;
  }
  if (dataFromPreviousPage.resume.part3) {
    programs.value = dataFromPreviousPage.resume.part3;
  }
  if (dataFromPreviousPage.context.awards) {
    honors.value = dataFromPreviousPage.context.awards;
  }
  if (dataFromPreviousPage.resume.part4) {
    self.value = dataFromPreviousPage.resume.part4;
  }
  console.log(dataFromPreviousPage);
});
const post = async () => {
  try {
    const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
    // 获取要截图的元素，这里假设是整个页面
    const element = document.querySelector('.card4');
    const canvas = await html2canvas(element);
    // 将截图转换为 dataURL 格式存储到变量中
    screenshot.value = canvas.toDataURL('image/png');
    console.log('成功');
    console.log(screenshot);
    axios.post('http://localhost:8082/seeker/match',
        {
          seekerid:dataFromPreviousPage.context.seekerid,
        }, {
      headers: {
        'Content-Type': 'application/json',
      },
    }).then(response => {
      if (response.data.success) {
        console.log(response.data.data);
        router.push('/companies');
      }
    }).catch(error => {
      console.error('跳转出错:', error);
    });
    // 假设登录成功后，跳转到仪表盘页面

  } catch (error) {
    console.error('截图失败:', error);
  }
};
const resume = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/resume');
};
const myDeliver = () => {
  // 这里添加你的登录逻辑
  // 假设登录成功后，跳转到仪表盘页面
  router.push('/myDeliver');
};
const exit = () => {
  router.push('/');
}
// 切换编辑状态
const isEditingBase = ref(false);
const isEditingEducation = ref(false);
const isEditingSkill = ref(false);
const isEditingProgram = ref(false);
const isEditingHonor = ref(false);
const isEditingSelf = ref(false);

// 控制是否处于添加新的项目的编辑状态（新增）
const isAddingProgram = ref(false);
const isAddingSkill = ref(false);
const isAddingHonor = ref(false);
const isAddingSelf = ref(false);
// 用于存储新添加荣誉奖项的索引（新增，方便后续操作新添加的荣誉奖项对象）
let newHonorIndex = null;
// 记录当前正在编辑的新添加荣誉奖项的字段（新增）
const currentEditingHonorField = ref('');
const isNewHonorInitial = ref(true);
// 用于存储新添加技能的索引（新增，方便后续操作新添加的技能对象）
let newSkillIndex = null;
// 记录当前正在编辑的新添加技能的字段（新增）
const currentEditingSkillField = ref('');
const isNewSkillInitial = ref(true);

// 定义添加技能的方法，修改此处确保添加的是字符串格式技能
const addSkill = () => {
  if (!isAddingSkill.value) {
    // 直接添加空字符串作为新技能，使其与原始技能格式一致
    skills.value.push('');
    newSkillIndex = skills.value.length - 1;
    isAddingSkill.value = true;
    isNewSkillInitial.value = true;
    // 立即聚焦到新添加技能（这里直接对整个技能内容进行编辑）
    currentEditingSkillField.value = '';
  } else {
    // 如果已经处于添加技能状态，检查是否填写内容，若填写了则结束添加状态
    if (newSkillIndex!== null && newSkillIndex < skills.value.length) {
      const skillContent = skills.value[newSkillIndex];
      // 检查技能内容是否为空（这里更严谨地判断，去除两端空白字符后判断）
      if (skillContent.trim()!== '') {
        currentEditingSkillField.value = '';
        isAddingSkill.value = false;
        isNewSkillInitial.value = false;
      }
    }
  }
};

// 用于存储新添加项目的索引（新增，方便后续操作新添加的项目对象）
let newProgramIndex = null;
// 记录当前正在编辑的新添加项目的字段（新增）
const currentEditingField = ref('');
const isNewProgramInitial = ref(true);
// 定义添加项目的方法
const addProgram = () => {
  if (!isAddingProgram.value) {
    // 在programs数组中添加一个新的空项目对象，并确保其非空
    const newProgram = {
      name: '',
      description: '',
      techStack: '',
      achievements: ''
    };
    programs.value.push(newProgram);
    newProgramIndex = programs.value.length - 1;
    isAddingProgram.value = true;
    isNewProgramInitial.value = true;
    // 立即聚焦到第一个字段
    currentEditingField.value = 'name';
  } else {
    // 如果已经处于添加项目状态，检查是否填写内容，若填写了则结束添加状态
    if (newProgramIndex!== null && newProgramIndex < programs.value.length) {
      const currentProgram = programs.value[newProgramIndex];
      const allFieldsFilled = ['name', 'description', 'techStack', 'achievements'].every(f => currentProgram[f].trim()!== '');
      if (allFieldsFilled) {
        currentEditingField.value = '';
        isAddingProgram.value = false;
        isNewProgramInitial.value = false;
      }
    }
  }
};

// 定义添加荣誉奖项的方法
const addHonor = () => {
  if (!isAddingHonor.value) {
    // 在honors数组中添加一个新的空荣誉奖项对象，并确保其非空
    const newHonor = {
      name: '',
      description: '',
      institution: '',
      date: ''
    };
    honors.value.push(newHonor);
    newHonorIndex = honors.value.length - 1;
    isAddingHonor.value = true;
    isNewHonorInitial.value = true;
    // 立即聚焦到第一个字段（这里假设先聚焦到 'name' 字段）
    currentEditingHonorField.value = 'name';
  } else {
    // 如果已经处于添加荣誉奖项状态，检查是否填写内容，若填写了则结束添加状态
    if (newHonorIndex!== null && newHonorIndex < honors.value.length) {
      const currentHonor = honors.value[newHonorIndex];
      const allFieldsFilled = ['name', 'description', 'institution', 'date'].every(f => currentHonor[f].trim()!== '');
      if (allFieldsFilled) {
        currentEditingHonorField.value = '';
        isAddingHonor.value = false;
        isNewHonorInitial.value = false;
      }
    }
  }
};

// 切换编辑状态的方法（进一步完善，针对新添加项目不同字段编辑状态切换）
const toggleEdit = (field) => {
  if (field === 'base') {
    if(isEditingBase.value){
      const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
      console.log(dataFromPreviousPage);
      dataFromPreviousPage.context.name = name.value;
      dataFromPreviousPage.context.age = age.value;
      dataFromPreviousPage.context.phone = contactNumber.value;
      dataFromPreviousPage.context.gender = gender.value;
      dataFromPreviousPage.context.identity = politicalStatus.value;
      dataFromPreviousPage.context.email = email.value;
      dataFromPreviousPage.context.expectjob = jobSeeking.value;
      dataFromPreviousPage.status = 1;
      localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
      const formData = new FormData();
      formData.append('context', JSON.stringify(dataFromPreviousPage));
      formData.append('id', dataFromPreviousPage.context.seekerid);
      axios.post('http://localhost:8082/COSandAI/Save',formData , {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(response => {
        if (response.data.success) {
          console.log(response.data.data);
        }
      }).catch(error => {
        console.error('修改保存出错:', error);
      });
    }
    isEditingBase.value =!isEditingBase.value;
  } else if (field === 'education') {
    if(isEditingEducation.value){
      const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
      console.log(dataFromPreviousPage);
      dataFromPreviousPage.context.startYear = educationStartDate.value;
      dataFromPreviousPage.context.endYear = educationEndDate.value;
      dataFromPreviousPage.context.degree = degree.value;
      dataFromPreviousPage.context.major = major.value;
      dataFromPreviousPage.resume.part1 = mainCourses.value;
      dataFromPreviousPage.status = 1;
      localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
      const formData = new FormData();
      formData.append('context', JSON.stringify(dataFromPreviousPage));
      formData.append('id', dataFromPreviousPage.context.seekerid);
      axios.post('http://localhost:8082/COSandAI/Save',formData , {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(response => {
        if (response.data.success) {
          console.log(response.data.data);
        }
      }).catch(error => {
        console.error('修改保存出错:', error);
      });
    }
    isEditingEducation.value =!isEditingEducation.value;
  } else if (field === 'skill') {
    if (isAddingSkill.value) {
      // 处理正在添加技能时（新建技能状态下）的操作逻辑，比如判断是否填写完成等
      if (newSkillIndex!== null && newSkillIndex < skills.value.length) {
        const allFieldsFilled = skills.value[newSkillIndex].trim()!== '';
        if (allFieldsFilled) {
          // 如果已填写，退出添加模式
          isAddingSkill.value = false;
          currentEditingSkillField.value = '';
        } else {
          // 如果未填写，保持添加模式，并聚焦到当前技能内容（因为技能只是一个字符串，这里简单聚焦）
          currentEditingSkillField.value = '';
        }
      }
    } else {
      // 进入编辑技能状态，区分是点击编辑已有技能还是误触发新建技能的情况
      if (!isAddingSkill.value) {
        if(isEditingSkill.value){
          const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
          dataFromPreviousPage.status = 1;
          console.log(dataFromPreviousPage);
          dataFromPreviousPage.resume.part2 = skills.value;
          localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
          const formData = new FormData();
          formData.append('context', JSON.stringify(dataFromPreviousPage));
          formData.append('id', dataFromPreviousPage.context.seekerid);
          axios.post('http://localhost:8082/COSandAI/Save',formData , {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            }
          }).catch(error => {
            console.error('修改保存出错:', error);
          });
        }
        isEditingSkill.value =!isEditingSkill.value;
      }
    }
    return;
  } else if (field === 'program') {
    if (isAddingProgram.value) {
      // 处理正在添加项目时（新建项目状态下）的操作逻辑，比如判断是否填写完成等
      if (newProgramIndex!== null && newProgramIndex < programs.value.length) {
        const allFieldsFilled = ['name', 'description', 'techStack', 'achievements'].every(f => programs.value[newProgramIndex][f].trim()!== '');
        if (allFieldsFilled) {
          // 如果所有字段都已填写，退出添加模式
          isAddingProgram.value = false;
          currentEditingField.value = '';
        } else {
          // 如果有字段未填写，保持添加模式，并聚焦到第一个未填写的字段
          const firstEmptyField = ['name', 'description', 'techStack', 'achievements'].find(f => programs.value[newProgramIndex][f].trim() === '');
          currentEditingField.value = firstEmptyField;
        }
      }
    } else {
      // 进入编辑项目状态，区分是点击编辑已有项目还是误触发新建项目的情况
      if (!isAddingProgram.value) {
        if(isEditingProgram.value){
          const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
          console.log(dataFromPreviousPage);
          dataFromPreviousPage.resume.part3 = programs.value;
          localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
          const formData = new FormData();
          formData.append('context', JSON.stringify(dataFromPreviousPage));
          formData.append('id', dataFromPreviousPage.context.seekerid);
          axios.post('http://localhost:8082/COSandAI/Save',formData , {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            }
          }).catch(error => {
            console.error('修改保存出错:', error);
          });
        }
        isEditingProgram.value =!isEditingProgram.value;
      }
    }
    return;
  } else if (field === 'honor') {
    if (isAddingHonor.value) {
      // 处理正在添加荣誉奖项时（新建荣誉奖项状态下）的操作逻辑，比如判断是否填写完成等
      if (newHonorIndex!== null && newHonorIndex < honors.value.length) {
        const allFieldsFilled = ['name', 'description', 'institution', 'date'].every(f => honors.value[newHonorIndex][f].trim()!== '');
        if (allFieldsFilled) {
          // 如果所有字段都已填写，退出添加模式
          isAddingHonor.value = false;
          currentEditingHonorField.value = '';
        } else {
          // 如果有字段未填写，保持添加模式，并聚焦到第一个未填写的字段
          const firstEmptyField = ['name', 'description', 'institution', 'date'].find(f => honors.value[newHonorIndex][f].trim() === '');
          currentEditingHonorField.value = firstEmptyField;
        }
      }
    } else {
      // 进入编辑荣誉奖项状态，区分是点击编辑已有荣誉奖项还是误触发新建荣誉奖项的情况
      if (!isAddingHonor.value) {
        if(isEditingHonor.value){
          const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
          console.log(dataFromPreviousPage);
          dataFromPreviousPage.context.awards = honors.value;
          localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
          const formData = new FormData();
          formData.append('context', JSON.stringify(dataFromPreviousPage));
          formData.append('id', dataFromPreviousPage.context.seekerid);
          axios.post('http://localhost:8082/COSandAI/Save',formData , {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            }
          }).catch(error => {
            console.error('修改保存出错:', error);
          });
        }
        isEditingHonor.value =!isEditingHonor.value;
      }
    }
    return;
  }else if (field === 'self'){
    if (isAddingSelf.value) {
      // 处理正在添加荣誉奖项时（新建荣誉奖项状态下）的操作逻辑，比如判断是否填写完成等
      if (newHonorIndex!== null && newHonorIndex < honors.value.length) {
        const allFieldsFilled = ['name', 'description', 'institution', 'date'].every(f => honors.value[newHonorIndex][f].trim()!== '');
        if (allFieldsFilled) {
          // 如果所有字段都已填写，退出添加模式
          isAddingHonor.value = false;
          currentEditingHonorField.value = '';
        } else {
          // 如果有字段未填写，保持添加模式，并聚焦到第一个未填写的字段
          const firstEmptyField = ['name', 'description', 'institution', 'date'].find(f => honors.value[newHonorIndex][f].trim() === '');
          currentEditingHonorField.value = firstEmptyField;
        }
      }
    } else {
      // 进入编辑荣誉奖项状态，区分是点击编辑已有荣誉奖项还是误触发新建荣誉奖项的情况
      if (!isAddingSelf.value) {
        if(isEditingSelf.value){
          const dataFromPreviousPage = JSON.parse(localStorage.getItem('dataFromPreviousPage'));
          console.log(dataFromPreviousPage);
          dataFromPreviousPage.resume.part4 = self.value;
          localStorage.setItem('dataFromPreviousPage', JSON.stringify(dataFromPreviousPage));
          const formData = new FormData();
          formData.append('context', JSON.stringify(dataFromPreviousPage));
          formData.append('id', dataFromPreviousPage.context.seekerid);
          axios.post('http://localhost:8082/COSandAI/Save',formData , {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }).then(response => {
            if (response.data.success) {
              console.log(response.data.data);
            }
          }).catch(error => {
            console.error('修改保存出错:', error);
          });
        }
        isEditingSelf.value =!isEditingSelf.value;
      }
    }
    return;
  }
};

// 检查编辑状态的方法（进一步完善，针对新添加项目不同字段编辑状态检查及处理）
const checkEdit = (field) => {
  if (field === 'base') {
    if (isEditingBase.value) {
      return;
    } else {
      toggleEdit('base');
    }
  }
  if (field === 'education') {
    if (isEditingEducation.value) {
      return;
    } else {
      toggleEdit('education');
    }
  }
  if (field === 'skill') {
    if (isAddingSkill.value) {
      // 只有在添加（新建）技能状态下且当前编辑字段与传入字段一致时才进行判断
      if (currentEditingSkillField.value === field) {
        const skillContent = skills.value[newSkillIndex];
        // 检查技能内容是否为空（这里更严谨地判断，去除两端空白字符后判断）
        if (skillContent.trim() === '') {
          return;
        }
        // 如果不为空，认为已填写完成，退出添加模式
        currentEditingSkillField.value = '';
        isAddingSkill.value = false;
        isNewSkillInitial.value = false;
      }
      return;
    }
    if (isEditingSkill.value) {
      return;
    } else {
      toggleEdit('skill');
    }
  }
  if (field === 'program') {
    if (isAddingProgram.value) {
      if (currentEditingField.value === field) {
        const currentProgram = programs.value[newProgramIndex];
        const allFieldsFilled = ['name', 'description', 'techStack', 'achievements'].every(f => currentProgram[f].trim()!== '');
        if (allFieldsFilled) {
          currentEditingField.value = '';
          isAddingProgram.value = false;
          isNewProgramInitial.value = false;
        } else {
          currentEditingField.value = '';
          setTimeout(() => {
            currentEditingField.value = field;
          }, 0);
        }
      }
      return;
    }
    if (isEditingProgram.value) {
      return;
    } else {
      toggleEdit('program');
    }
  }
  if (field === 'honor') {
    if (isAddingHonor.value) {
      if (currentEditingHonorField.value === field) {
        const currentHonor = honors.value[newHonorIndex];
        const allFieldsFilled = ['name', 'description', 'institution', 'date'].every(f => currentHonor[f].trim()!== '');
        if (allFieldsFilled) {
          currentEditingHonorField.value = '';
          isAddingHonor.value = false;
          isNewHonorInitial.value = false;
        } else {
          currentEditingHonorField.value = '';
          setTimeout(() => {
            currentEditingHonorField.value = field;
          }, 0);
        }
      }
      return;
    }
    if (isEditingHonor.value) {
      return;
    } else {
      toggleEdit('honor');
    }
  }
  if (field === 'self') {
    if (isAddingSelf.value) {
      if (currentEditingHonorField.value === field) {
        const currentHonor = honors.value[newHonorIndex];
        const allFieldsFilled = ['name', 'description', 'institution', 'date'].every(f => currentHonor[f].trim()!== '');
        if (allFieldsFilled) {
          currentEditingHonorField.value = '';
          isAddingHonor.value = false;
          isNewHonorInitial.value = false;
        } else {
          currentEditingHonorField.value = '';
          setTimeout(() => {
            currentEditingHonorField.value = field;
          }, 0);
        }
      }
      return;
    }
    if (isEditingSelf.value) {
      return;
    } else {
      toggleEdit('self');
    }
  }
};

</script>

<template>
  <div class="body1"  style="background-color: #DBE2EF;background-size: cover;">
      <el-row justify="center">
        <h1 style="color: #3F72AF">我的简历</h1>
      </el-row>
      <el-row>
        <div class="card4" style="background-color: #f9f7f7;overflow-y: auto;max-height: 750px">
        <el-descriptions
            style="margin: 30px;"
            class="margin-top"
            title="基本信息"
            :column="3"
            :size="'default'"
        >
          <template #extra>
            <el-button circle
                       @click="toggleEdit('base')">
              <el-icon v-if="!isEditingBase" size="20px"><EditPen /></el-icon>
              <el-icon v-else><Check/></el-icon>
            </el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              姓名：
            </template>
            <label v-if="!isEditingBase">
              {{ name }}
            </label>
            <el-input v-else v-model="name" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              年龄：
            </template>
            <label v-if="!isEditingBase">
              {{ age }}
            </label>
            <el-input v-else v-model="age" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              联系电话：
            </template>
            <label v-if="!isEditingBase">
              {{ contactNumber }}
            </label>
            <el-input v-else v-model="contactNumber" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              性别：
            </template>
            <label v-if="!isEditingBase">
              {{ gender }}
            </label>
            <el-input v-else v-model="gender" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              民族：
            </template>
            <label v-if="!isEditingBase">
              {{ ethnicity }}
            </label>
            <el-input v-else v-model="ethnicity" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              邮箱：
            </template>
            <label v-if="!isEditingBase">
              {{ email }}
            </label>
            <el-input v-else v-model="email" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              政治面貌：
            </template>
            <label v-if="!isEditingBase">
              {{ politicalStatus }}
            </label>
            <el-input v-else v-model="politicalStatus" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              求职岗位：
            </template>
            <label v-if="!isEditingBase">
              {{ jobSeeking }}
            </label>
            <el-input v-else v-model="jobSeeking" @blur="checkEdit('base')" @keyup.enter="checkEdit('base')"></el-input>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions
            style="margin: 30px;"
            class="margin-top"
            title="教育背景"
            :column="1"
            :size="'default'"
        >
          <template #extra>
            <el-button circle
                       @click="toggleEdit('education')">
              <el-icon v-if="!isEditingEducation" size="20px"><EditPen /></el-icon>
              <el-icon v-else><Check/></el-icon>
            </el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <el-row justify="space-between" style="color: #3F72AF;font-size: 18px;">
                <el-col span="12" style="text-align: center;display: flex;flex-direction: row">
                  <label v-if="!isEditingEducation">
                    {{ educationStartDate }}
                  </label>
                  <el-input v-else v-model="educationStartDate" @blur="checkEdit('education')" @keyup.enter="checkEdit('education')"></el-input>
                  <label>-</label>
                  <label v-if="!isEditingEducation">
                    {{ educationEndDate }}
                  </label>
                  <el-input v-else v-model="educationEndDate" @blur="checkEdit('education')" @keyup.enter="checkEdit('education')"></el-input>
                </el-col>
                <el-col span="12" style="text-align: center;display: flex;flex-direction: row">
                  <label v-if="!isEditingEducation">
                    {{ major }}
                  </label>
                  <el-input v-else v-model="major" @blur="checkEdit('education')" @keyup.enter="checkEdit('education')"></el-input>
                  <label>-</label>
                  <label v-if="!isEditingEducation">
                    {{ degree }}
                  </label>
                  <el-input v-else v-model="degree" @blur="checkEdit('education')" @keyup.enter="checkEdit('education')"></el-input>
                </el-col>
              </el-row>
            </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
            </template>
            <label v-if="!isEditingEducation">
              {{ mainCourses }}
            </label>
            <el-input v-else v-model="mainCourses" @blur="checkEdit('education')" @keyup.enter="checkEdit('education')"></el-input>
          </el-descriptions-item>
        </el-descriptions>

          <el-descriptions
              style="margin: 30px;"
              class="margin-top"
              title="技能特长"
              :column="1"
              :size="'default'"
          >
            <template #extra>
              <el-button circle
                         @click="toggleEdit('skill')">
                <el-icon v-if="!isEditingSkill" size="20px"><EditPen /></el-icon>
                <el-icon v-else><Check/></el-icon>
              </el-button>
            </template>
            <el-descriptions-item>
              <template #label>
              </template>
              <label v-if="!isEditingSkill">
                {{ skills }}
              </label>
              <el-input v-else v-model="skills" @blur="checkEdit('skill')" @keyup.enter="checkEdit('skill')"></el-input>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions
              style="margin: 30px;"
              class="margin-top"
              title="项目经验"
              :column="1"
              :size="'default'"
          >
            <template #extra>
              <el-button circle
                         @click="toggleEdit('program')">
                <el-icon v-if="!isEditingProgram" size="20px"><EditPen /></el-icon>
                <el-icon v-else><Check/></el-icon>
              </el-button>
            </template>
            <el-descriptions-item>
              <template #label>
              </template>
              <label v-if="!isEditingProgram">
                {{ programs }}
              </label>
              <el-input v-else v-model="programs" @blur="checkEdit('program')" @keyup.enter="checkEdit('program')"></el-input>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions
              style="margin: 30px;"
              class="margin-top"
              title="荣誉奖项"
              :column="1"
              :size="'default'"
          >

            <template #extra>
              <el-button circle
                         @click="toggleEdit('honor')">
                <el-icon v-if="!isEditingHonor" size="20px"><EditPen /></el-icon>
                <el-icon v-else><Check/></el-icon>
              </el-button>
            </template>
            <el-descriptions-item>
              <template #label>
              </template>
              <label v-if="!isEditingHonor">
                {{ honors }}
              </label>
              <el-input v-else v-model="honors" @blur="checkEdit('honor')" @keyup.enter="checkEdit('honor')"></el-input>
            </el-descriptions-item>

          </el-descriptions>
          <el-descriptions
              style="margin: 30px;"
              class="margin-top"
              title="个人评价"
              :column="1"
              :size="'default'"
          >
            <template #extra>
              <el-button circle
                         @click="toggleEdit('self')">
                <el-icon v-if="!isEditingSelf" size="20px"><EditPen /></el-icon>
                <el-icon v-else><Check/></el-icon>
              </el-button>
            </template>
            <el-descriptions-item>
              <template #label>
              </template>
              <label v-if="!isEditingSelf">
                {{ self }}
              </label>
              <el-input v-else v-model="self" @blur="checkEdit('self')" @keyup.enter="checkEdit('self')"></el-input>
            </el-descriptions-item>

          </el-descriptions>
      </div>
      </el-row>
  </div>
  <button style="color: #f9f7f7;font-weight: bold;font-size:28px;background-color: #3F72AF;border: 0;border-radius: 15px;padding: 10px;
  z-index: 99;position: absolute; top: 88%;right: 45%; transform: translateY(50%);box-shadow: 5px 5px 5px 2px #444444;"
          @click="post"
  >
    智能匹配岗位</button>
  <el-dropdown placement="bottom" style=" z-index: 99;position: absolute; top: 1%; right: 2%; transform: translateY(50%);" size="large">
    <span class="dropdown"> 我的 </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="resume">AI简历</el-dropdown-item>
        <el-dropdown-item @click="myDeliver">我的投递</el-dropdown-item>
        <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    <img  src="../../../public/resume.png" class="people" style="position: absolute; top: 49%; left: 50px; transform: translateY(50%);
  z-index: 99;width: 250px">
</template>

<style scoped>
@import "../../assets/css/global.css";
:deep(.el-descriptions__title){
  background-color: #3F72AF;
  color: #f9f7f7;
  font-size: 24px;
  padding: 5px;
  border-radius: 10px;
}

:deep(.el-descriptions__body){
  margin-top: -35px;
  background-color: rgba(255,255,255,0.7);
  border: #3F72AF 1px solid;
  border-radius: 15px;
  padding: 25px 10px 10px 15px;
}
:deep(.el-descriptions__table){
}
:deep(.el-descriptions__label){
  font-weight: bold;
}
:deep(.el-descriptions__content){
  text-align: left;
}
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条的宽度 */
  height: 4px; /* 水平滚动条的高度 */
}

/* 滚动条的滑块部分 */
::-webkit-scrollbar-thumb {
  background-color: #3F72AF; /* 滑块颜色 */
  border-radius: 8px; /* 滑块圆角 */
}

/* 滚动条的轨道部分 */
::-webkit-scrollbar-track {
  width: 8px;
  height: 4px;
  border-radius: 8px;
  background-color: transparent; /* 轨道颜色 */
}
:deep(.el-button){
  background-color: #3F72AF;
  color: #f9f7f7;
  border: #3F72AF 1px solid;
}
:deep(.el-button):hover{
  background-color: #f9f7f7;
  color: #3F72AF;
  border: #3F72AF 1px solid;
}
.dropdown{
  background-color: #f9f7f7;
  color: #3F72AF;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
.dropdown:hover{
  background-color: #3F72AF;
  color: #f9f7f7;
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
}
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

</style>